Skip to content

Enhance UI: Implement responsive card layout for Governing Board representatives and chairs (Resolves #2741) #2836

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Enhance UI: Implement responsive card layout for Governing Board representatives and chairs (Resolves #2741) #2836

wants to merge 4 commits into from

Conversation

AnushtupGhosh5
Copy link

This PR improves the visual presentation and responsiveness of the Governing Board page by implementing a modern card-based layout system.
fixes #2741

Key Changes:

  1. Representatives Section
image
  • Implemented a flexible card layout for elected representatives
  • Organized cards into distinct category groups (Community, Funder, Foundation)
  • Cards display in a single row on larger screens with equal width distribution
  • Added subtle visual hierarchy with gradient backgrounds and clean borders
  • Improved readability with consistent typography and spacing
  1. Chairs Section
image
  • Created distinct styling for Governing Board chair vs committee chairs
  • Maintained visual consistency while differentiating hierarchy
  • Applied gradient backgrounds to individual chair cards
  • Added subtle separators between board and committee chairs
  1. Responsive Design
    • Desktop: Single row layout for representatives, grid layout for chairs
    • Tablet (≤1024px): 2-column grid layout
    • Mobile (≤767px): Single column layout with optimized spacing
    • Consistent padding and margins across all breakpoints

Technical Details:

  • Used CSS Grid and Flexbox for robust layouts
  • Implemented CSS custom properties for maintainable styling
  • Added smooth transitions for hover states
  • Optimized container and card sizing to prevent overflow
  • Ensured cross-browser compatibility

Visual Improvements:

  • Added subtle gradients for depth
  • Consistent spacing and alignment
  • Clear visual hierarchy
  • Modern, clean aesthetic
  • Improved content organization

Testing:

  • Tested across multiple screen sizes
  • Verified all content remains visible and accessible
  • Checked hover states and transitions
  • Ensured no horizontal scrolling on mobile
  • Validated layout in major browsers

This update significantly improves the user experience while maintaining a professional and organized presentation of the Governing Board structure.

@AnushtupGhosh5
Improves visual clarity of Governing Board chairs with card-based lay…
391bfb9 
…out and integrates CTE chairs. Categorizes elected representatives into boxed container sections for better readability.
@AnushtupGhosh5
Copy link
Author

Hi @HarHarLinks ,
I have fixed the issue raised by you. Could you please review it?

@HarHarLinks HarHarLinks added enhancement This would be an improvement to the website. aesthetic Visual inconsistencies or improvements labels Jul 21, 2025
@AnushtupGhosh5
Copy link
Author

Hey @HarHarLinks ,
Could you please review or send a review request? And please let me know if there is any other change that you want.

@HarHarLinks
Copy link
Collaborator

Hi @AnushtupGhosh5, this is incredible, thank you very much for this contribution! This goes far beyond what I could dream of when I wrote the ticket, I am in awe.

You have obviously spent some effort on marrying the existing rather raw design with some bells and whistles for a more modern experience. We have internally also discussed redesigning the website. Before I can accept this PR or give clearer feedback, I will have to check with the team. Unfortunately this might take some time due to the summer holiday season.

@AnushtupGhosh5
Copy link
Author

sure, no problem @HarHarLinks. Thank you for your compliments; it means a lot.

@AnushtupGhosh5
Copy link
Author

Hi @HarHarLinks,
Just a reminder , could you review it now?

@HarHarLinks
clean up css
df498b9 
Signed-off-by: HarHarLinks <[email protected]>
@HarHarLinks
remove comments
3e57b66 
Signed-off-by: HarHarLinks <[email protected]>
@HarHarLinks
rename css class
6308d42 
Signed-off-by: HarHarLinks <[email protected]>
@HarHarLinks
Copy link
Collaborator

HarHarLinks commented Aug 18, 2025 •
edited
Loading

I went and removed some of the css that I found not to match the website's current design, animations, gradients. I also removed a good amount of seemingly redundant CSS and renamed a thing whose name appeared to be misleading to me. I also converted titles generated by CSS pseudo elements to proper md source. This and the comments stating the obvious gave this PR a smell of having been generated using an LLM. We don't currently have a policy about using "AI", though as maintainers we would appreciate contributions that are well-understood and clean, beyond "the result looks like it works". Note that by signing off, you affirm that you have the rights to contribute your patches under our license.

Please point out in case my removing stuff broke something and explain why.

I would be ready to merge at this point, but am looping in my co-maintainers for review since at this point I wrote half of the PR myself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thibaultamartin thibaultamartin Awaiting requested review from thibaultamartin

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
aesthetic Visual inconsistencies or improvements enhancement This would be an improvement to the website.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Structure of GB page
2 participants
@AnushtupGhosh5 @HarHarLinks